<template>
    <div class="main">
        <el-card class="box-card1">
            <template #header>
                <div class="card-header">
                    <span>结算设置</span>
                </div>
            </template>
            <el-form :model="page" class="demo-form-inline" label-width="200px">
                <el-form-item label="默认结算费率">
                    <div>
                        <el-input v-model="page.defaultRate" onkeyup="value=value.replace(/[^\d]/g,'')">
                            <template #append>%</template>
                        </el-input>
                        <div>
                            平台默认抽成比例，例如默认费率是10%，那么商品卖出100元，商家得90元，平台得10元
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="线上结算">
                    <div>
                        <el-switch v-model="page.onlinePay" :active-value="0" :inactive-value="1" />
                        <div>
                            开启线上结算，需要开通企业付款到银行卡或企业付款到零钱接口
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="线上结算方式">
                    <el-checkbox-group v-model="page.onlinePayWay">
                        <el-checkbox label="微信零钱" name="type" value="微信零钱" />
                        <el-checkbox label="银行卡" name="type" value="银行卡" />
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="最低结算额度">
                    <div>
                        <el-input v-model="page.miniPayLimit" onkeyup="value=value.replace(/[^\d]/g,'')">
                            <template #append>元</template>
                        </el-input>
                        <div>
                            商家余额大于或等于最低提现额度方可提现
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="结算频率">
                    <div>
                        <el-input v-model="page.payfrequency" onkeyup="value=value.replace(/[^\d]/g,'')">
                            <template #append>天</template>
                        </el-input>
                        <div>
                            商家两次提现最低间隔时间，填0则不限制提现频率
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="商家数据显示模式">
                    <el-radio-group v-model="page.storeDataDismode">
                        <el-radio label="平台销售数据" value="0" />
                        <el-radio label="商家入账数据" value="1" />
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="提现方式">
                    <div>
                        <el-radio-group v-model="page.cashWay" @change="radioChange">
                            <el-radio label="平台销售数据" value="0" />
                            <el-radio label="商家入账数据" value="1" />
                        </el-radio-group>
                        <div>
                            微信零钱或银行卡:商家申请后直接打款（设置是否审核）至微信零钱或银行卡;系统余额：商家需要两次提现申请，第一次提现至系统余额，第二次在“余额提现”菜单中提现至微信零钱或银行卡
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="提现是否审核" v-if="page.cashWay == '0'">
                    <div>
                        <el-radio-group v-model="page.cashReview">
                            <el-radio label="需要审核" value="0" />
                            <el-radio label="无需审核" value="1" />
                        </el-radio-group>
                    </div>
                </el-form-item>
                <el-form-item label="申请至余额是否审核" v-if="page.cashWay == '1'">
                    <div>
                        <el-radio-group v-model="page.applicationBalanceReview">
                            <el-radio label="需要审核" value="0" />
                            <el-radio label="无需审核" value="1" />
                        </el-radio-group>
                    </div>
                </el-form-item>
                <el-form-item label="余额至零钱是否审核" v-if="page.cashWay == '1'">
                    <div>
                        <el-radio-group v-model="page.balanceMoneyReview">
                            <el-radio label="需要" value="0" />
                            <el-radio label="不需要" value="1" />
                        </el-radio-group>
                    </div>
                </el-form-item>



                <el-form-item>
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup>
import { onMounted, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import { getTlementSettingList, settlementSettingUpdate } from '@/api/settings.js'

const page = reactive({
    defaultRate: "0",
    onlinePay: "0",
    onlinePayWay: [],
    miniPayLimit: '0',
    payfrequency: '0',
    storeDataDismode: '0',
    cashWay: '0',
    applicationBalanceReview: '',
    balanceMoneyReview: '',
    cashReview: '0',
})

// 提现方式
const radioChange = (value) => {
    if (value == '0') {
        ElMessageBox.confirm(
            '所有无需审核的提现申请或后台同意打款的申请都将直接打款到微信零钱或银行卡！！！',
            '提示',
            {
                confirmButtonText: 'OK',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(() => {
                page.cashWay = '0'
                page.cashReview = '0'
                page.balanceMoneyReview = ''
                page.applicationBalanceReview = ''
            })
            .catch(() => {
                page.cashWay = '1'
                page.balanceMoneyReview = '0'
                page.applicationBalanceReview = '0'
                page.cashReview = ''
            })
    } else {
        ElMessageBox.confirm(
            '所有无需审核的提现申请或后台同意打款的申请都将先打款到商家余额，后续打款操作需要在余额提现申请里面同意打款再发放到微信零钱或银行卡！！！',
            '提示',
            {
                confirmButtonText: 'OK',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(() => {
                page.cashWay = '1'
                page.balanceMoneyReview = '0'
                page.applicationBalanceReview = '0'
                page.cashReview = ''
            })
            .catch(() => {
                page.cashWay = '0'
                page.cashReview = '0'
                page.balanceMoneyReview = ''
                page.applicationBalanceReview = ''
            })
    }
}


const onSubmit = () => {
    if (page.onlinePayWay) {
        page.onlinePayWay = page.onlinePayWay.join(',')
    }
    settlementSettingUpdate(page).then(res => {
        if (res.code == 200) {
            ElMessage({
                type: 'success',
                message: '保存成功',
            })
            getList()
        }
    })
}
const getList = () => {
    getTlementSettingList().then(res => {
        if (res.code == 200) {
            console.log(res);
            page.defaultRate = res.data[0].defaultRate
            page.onlinePay = res.data[0].onlinePay
            if (res.data[0].onlinePayWay) {

                page.onlinePayWay = res.data[0].onlinePayWay.split(',')
            }
            page.miniPayLimit = res.data[0].miniPayLimit
            page.payfrequency = res.data[0].payfrequency
            page.storeDataDismode = res.data[0].storeDataDismode
            page.cashWay = res.data[0].cashWay
            page.applicationBalanceReview = res.data[0].applicationBalanceReview
            page.balanceMoneyReview = res.data[0].balanceMoneyReview
            page.cashReview = res.data[0].cashReview

        }
    })
}
onMounted(() => {
    getList()
})

</script>

<style lang="scss" scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24px;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.box-card1 {
    width: 100%;

    .el-input {
        width: 200px !important;
    }
}

.main {
    padding: 0 5px 5px 5px;
}
</style>